<template>
  <div class="article-detail">
    <!-- 文章内容 -->
    <main class="article-main" v-if="article">
      <!-- 文章头部信息 -->
      <header class="article-header">
        <h1 class="article-title">{{ article.title }}</h1>
        <div class="article-meta">
          <div class="author-info">
            <div class="author-avatar" v-if="!article.authorAvatar">
              {{ article.authorName?.charAt(0) || 'A' }}
            </div>
            <img v-else :src="article.authorAvatar" :alt="article.authorName" class="author-avatar-img" />
            <div class="author-details">
              <span class="author-name">{{ article.authorName }}</span>
              <span class="publish-time">{{ formatTime(article.publishTime) }}</span>
            </div>
          </div>
          <div class="article-stats">
            <button
              class="stat-btn"
              :class="{ active: isLiked }"
              @click="handleLike"
            >
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ article.likeCount || 0 }}
            </button>
            <button class="stat-btn">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              {{ article.commentCount || 0 }}
            </button>
            <button class="stat-btn">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <polyline points="16 6 12 2 8 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <line x1="12" y1="2" x2="12" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
              分享
            </button>
          </div>
        </div>
        <div class="article-tags" v-if="article.tags && article.tags.length">
          <span v-for="tag in article.tags" :key="tag" class="tag">{{ tag }}</span>
        </div>
      </header>

      <!-- 文章图片画廊 - 轮播图 -->
      <div class="article-gallery-carousel" v-if="article.images && article.images.length">
        <div class="carousel-container">
          <button
            class="carousel-btn carousel-prev"
            @click="prevImage"
            v-if="article.images.length > 1"
          >
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <polyline points="15 18 9 12 15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="carousel-wrapper" @click="openImageGallery(currentImageIndex)">
            <div
              class="carousel-slide"
              :style="{ transform: `translateX(-${currentImageIndex * 100}%)` }"
            >
              <div
                v-for="(image, index) in article.images"
                :key="index"
                class="carousel-item"
              >
                <img :src="image" :alt="`${article.title} - 图片 ${index + 1}`" />
              </div>
            </div>
          </div>
          <button
            class="carousel-btn carousel-next"
            @click="nextImage"
            v-if="article.images.length > 1"
          >
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <polyline points="9 18 15 12 9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        <!-- 指示器 -->
        <div class="carousel-indicators" v-if="article.images.length > 1">
          <button
            v-for="(image, index) in article.images"
            :key="index"
            class="indicator"
            :class="{ active: currentImageIndex === index }"
            @click="currentImageIndex = index"
          ></button>
        </div>
        <!-- 图片计数器 -->
        <div class="carousel-counter" v-if="article.images.length > 1">
          {{ currentImageIndex + 1 }} / {{ article.images.length }}
        </div>
      </div>

      <!-- 文章正文 -->
      <div class="article-content">
        <div class="content-text-plain">{{ article.content }}</div>
      </div>

      <!-- 图片画廊模态框 -->
      <div v-if="showImageGallery" class="image-gallery-modal" @click="closeImageGallery">
        <div class="gallery-modal-content" @click.stop>
          <button class="gallery-close" @click="closeImageGallery">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </button>
          <button class="gallery-prev" @click.stop="prevImage" v-if="article.images.length > 1">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <polyline points="15 18 9 12 15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <button class="gallery-next" @click.stop="nextImage" v-if="article.images.length > 1">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <polyline points="9 18 15 12 9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <img :src="article.images[currentImageIndex]" :alt="`${article.title} - 图片 ${currentImageIndex + 1}`" />
          <div class="gallery-counter">{{ currentImageIndex + 1 }} / {{ article.images.length }}</div>
        </div>
      </div>
    </main>

    <!-- 评论区 -->
    <div class="comments-section">
      <div class="comments-header">
        <h2 class="comments-title">评论 ({{ comments.length }})</h2>
      </div>

      <!-- 发表评论 -->
      <div class="comment-input-section">
        <div class="comment-input-wrapper">
          <div class="current-user-avatar" v-if="!userInfo?.avatar">
            {{ userInfo?.userName?.charAt(0) || 'U' }}
          </div>
          <img v-else :src="userInfo.avatar" :alt="userInfo.userName" class="current-user-avatar-img" />
          <textarea
            v-model="newComment"
            placeholder="写下你的评论..."
            class="comment-input"
            rows="3"
            @keydown.ctrl.enter="handleSubmitComment"
          ></textarea>
        </div>
        <button class="submit-comment-btn" @click="handleSubmitComment" :disabled="!newComment.trim()">
          发布评论
        </button>
      </div>

      <!-- 评论列表 -->
      <div class="comments-list">
        <div v-if="comments.length === 0" class="empty-comments">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <p>还没有评论，快来发表第一条评论吧！</p>
        </div>
        <div v-else>
          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <div class="comment-avatar" v-if="!comment.userAvatar">
              {{ comment.userName?.charAt(0) || 'U' }}
            </div>
            <img v-else :src="comment.userAvatar" :alt="comment.userName" class="comment-avatar-img" />
            <div class="comment-content-wrapper">
              <div class="comment-header">
                <span class="comment-author">{{ comment.userName }}</span>
                <span class="comment-time">{{ formatTime(comment.createdTime) }}</span>
              </div>
              <p class="comment-text">{{ comment.content }}</p>
              <div class="comment-actions">
                <button
                  class="action-link"
                  @click="handleCommentLike(comment.id)"
                  :class="{ active: comment.isLiked }"
                >
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  {{ comment.likeCount || 0 }}
                </button>
                <button class="action-link" @click="startReply(comment.id)">
                  回复
                </button>
              </div>
              <!-- 回复输入框 -->
              <div v-if="replyingTo === comment.id" class="reply-input-section">
                <div class="reply-input-wrapper">
                  <div class="current-user-avatar" v-if="!userInfo?.avatar">
                    {{ userInfo?.userName?.charAt(0) || 'U' }}
                  </div>
                  <img v-else :src="userInfo.avatar" :alt="userInfo.userName" class="current-user-avatar-img" />
                  <textarea
                    v-model="replyContent"
                    :placeholder="`回复 ${comment.userName}...`"
                    class="reply-input"
                    rows="2"
                    @keydown.ctrl.enter="handleSubmitReply(comment.id)"
                  ></textarea>
                </div>
                <div class="reply-actions">
                  <button class="reply-cancel-btn" @click="cancelReply">取消</button>
                  <button
                    class="reply-submit-btn"
                    @click="handleSubmitReply(comment.id)"
                    :disabled="!replyContent.trim()"
                  >
                    发布
                  </button>
                </div>
              </div>
              <!-- 回复列表 -->
              <div v-if="comment.replies && comment.replies.length > 0" class="replies-list">
                <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                  <div class="reply-avatar" v-if="!reply.userAvatar">
                    {{ reply.userName?.charAt(0) || 'U' }}
                  </div>
                  <img v-else :src="reply.userAvatar" :alt="reply.userName" class="reply-avatar-img" />
                  <div class="reply-content">
                    <div class="reply-header">
                      <span class="reply-author">{{ reply.userName }}</span>
                      <span class="reply-time">{{ formatTime(reply.createdTime) }}</span>
                    </div>
                    <p class="reply-text">{{ reply.content }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { articleApi } from '@/utils/api'

const route = useRoute()
const router = useRouter()

// 响应式数据
const article = ref(null)
const comments = ref([])
const newComment = ref('')
const isLiked = ref(false)
const showImageGallery = ref(false)
const currentImageIndex = ref(0)
const userInfo = ref(null)
const replyingTo = ref(null) // 当前正在回复的评论ID
const replyContent = ref('') // 回复内容

// 加载文章详情
async function loadArticle() {
  const articleId = route.params.id
  if (!articleId) {
    router.push('/community/articles')
    return
  }

  try {
    console.log('请求文章详情参数:', articleId)
    const response = await articleApi.getEssayById(articleId)
    console.log('文章详情接口返回:', response)
    const essayData = response && typeof response === 'object' && 'data' in response ? response.data : response

    if (!essayData) {
      throw new Error('未获取到文章数据')
    }

    const rawImages = essayData.images
    let imageList = []
    if (Array.isArray(rawImages)) {
      imageList = rawImages.filter(img => !!img)
    } else if (typeof rawImages === 'string') {
      imageList = rawImages
        .split(',')
        .map(img => img.trim())
        .filter(img => img.length > 0)
    }

    const user = essayData.user || {}
    const authorName = user.userName || essayData.userName || '匿名用户'
    const authorAvatar = user.avatar || essayData.avatar || null

    let tags = []
    if (Array.isArray(essayData.types)) {
      tags = essayData.types
        .map(type => {
          if (typeof type === 'string') {
            return type.trim()
          }
          if (type && typeof type === 'object') {
            return (type.tName ?? type.tname ?? type.name ?? '').trim()
          }
          return ''
        })
        .filter(tag => tag.length > 0)
    }

    article.value = {
      id: essayData.eId ?? essayData.eid ?? Number(articleId),
      title: essayData.title ?? '',
      content: essayData.content ?? '',
      authorName,
      authorAvatar,
      publishTime: essayData.createTime ?? '',
      tags,
      likeCount: typeof essayData.likeCount === 'number' ? essayData.likeCount : 0,
      commentCount: typeof essayData.commentCount === 'number' ? essayData.commentCount : 0,
      images: imageList,
      rawData: essayData
    }

    // 若后端暂未提供评论列表，默认置空
    comments.value = []
    article.value.commentCount = comments.value.length

    currentImageIndex.value = 0
  } catch (error) {
    console.error('加载文章失败:', error)
    router.push('/community/articles')
  }
}

// 格式化时间
function formatTime(time) {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now - date
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`

  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 处理点赞
function handleLike() {
  isLiked.value = !isLiked.value
  if (isLiked.value) {
    article.value.likeCount++
  } else {
    article.value.likeCount--
  }
  // TODO: 调用API更新点赞状态
}

// 打开图片画廊
function openImageGallery(index) {
  currentImageIndex.value = index
  showImageGallery.value = true
  document.body.style.overflow = 'hidden'
}

// 关闭图片画廊
function closeImageGallery() {
  showImageGallery.value = false
  document.body.style.overflow = ''
}

// 上一张图片
function prevImage() {
  if (currentImageIndex.value > 0) {
    currentImageIndex.value--
  } else {
    currentImageIndex.value = article.value.images.length - 1
  }
}

// 下一张图片
function nextImage() {
  if (currentImageIndex.value < article.value.images.length - 1) {
    currentImageIndex.value++
  } else {
    currentImageIndex.value = 0
  }
}

// 提交评论
function handleSubmitComment() {
  if (!newComment.value.trim()) return

  const comment = {
    id: Date.now(),
    userName: userInfo.value?.userName || '游客',
    userAvatar: userInfo.value?.avatar || null,
    content: newComment.value.trim(),
    createdTime: new Date().toISOString(),
    likeCount: 0,
    isLiked: false,
    replies: []
  }

  comments.value.unshift(comment)
  article.value.commentCount++
  newComment.value = ''

  // TODO: 调用API提交评论
}

// 评论点赞
function handleCommentLike(commentId) {
  const comment = comments.value.find(c => c.id === commentId)
  if (comment) {
    comment.isLiked = !comment.isLiked
    if (comment.isLiked) {
      comment.likeCount++
    } else {
      comment.likeCount--
    }
    // TODO: 调用API更新评论点赞状态
  }
}

// 开始回复
function startReply(commentId) {
  replyingTo.value = commentId
  replyContent.value = ''
  // 滚动到回复输入框
  nextTick(() => {
    const replySection = document.querySelector(`.reply-input-section`)
    if (replySection) {
      replySection.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
      const textarea = replySection.querySelector('textarea')
      if (textarea) {
        textarea.focus()
      }
    }
  })
}

// 取消回复
function cancelReply() {
  replyingTo.value = null
  replyContent.value = ''
}

// 提交回复
function handleSubmitReply(commentId) {
  if (!replyContent.value.trim()) return

  const comment = comments.value.find(c => c.id === commentId)
  if (!comment) return

  const reply = {
    id: Date.now(),
    userName: userInfo.value?.userName || '游客',
    userAvatar: userInfo.value?.avatar || null,
    content: replyContent.value.trim(),
    createdTime: new Date().toISOString()
  }

  if (!comment.replies) {
    comment.replies = []
  }
  comment.replies.push(reply)

  replyingTo.value = null
  replyContent.value = ''

  // TODO: 调用API提交回复
  console.log('提交回复:', reply)
}

// 键盘导航
function handleKeydown(event) {
  if (showImageGallery.value) {
    // 在全屏画廊模式下才响应键盘
    if (event.key === 'ArrowLeft') {
      prevImage()
    } else if (event.key === 'ArrowRight') {
      nextImage()
    } else if (event.key === 'Escape') {
      closeImageGallery()
    }
  }
}

onMounted(() => {
  // 确保页面可以滚动
  document.documentElement.style.overflow = 'auto'
  document.body.style.overflow = 'auto'
  document.documentElement.style.height = 'auto'
  document.body.style.height = 'auto'

  // 从localStorage获取用户信息
  const storedUserInfo = localStorage.getItem('userInfo')
  if (storedUserInfo) {
    try {
      userInfo.value = JSON.parse(storedUserInfo)
    } catch (error) {
      console.error('解析用户信息失败:', error)
    }
  }

  loadArticle()

  // 添加键盘事件监听
  window.addEventListener('keydown', handleKeydown)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
  // 恢复 body 样式（如果需要的话）
  // document.body.style.overflow = ''
})
</script>

<style scoped>
:global(html, body) {
  overflow: auto !important;
  height: auto !important;
}

.article-detail {
  min-height: calc(100vh - 64px);
  background: #f9fafb;
  padding-top: 64px;
  padding-bottom: 32px;
  overflow-x: hidden;
  overflow-y: visible;
}

.article-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  background: #ffffff;
  margin-bottom: 0;
}

.article-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eef0f5;
}

.article-title {
  font-size: 32px;
  font-weight: 700;
  color: #2b2f36;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  flex-shrink: 0;
}

.author-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: #2b2f36;
}

.publish-time {
  font-size: 14px;
  color: #9ca3af;
}

.article-stats {
  display: flex;
  gap: 12px;
  align-items: center;
}

.stat-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-btn:hover {
  background: #f3f4f6;
  color: #667eea;
}

.stat-btn.active {
  background: #fee2e2;
  border-color: #f87171;
  color: #dc2626;
}

.stat-btn.active svg {
  fill: #dc2626;
}

.stat-btn svg {
  width: 18px;
  height: 18px;
}

.article-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  background: #f3f4f6;
  color: #667eea;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

/* 轮播图样式 */
.article-gallery-carousel {
  position: relative;
  margin-bottom: 32px;
  border-radius: 12px;
  overflow: hidden;
}

.carousel-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.carousel-wrapper {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.carousel-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.carousel-prev {
  left: 16px;
}

.carousel-next {
  right: 16px;
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
  color: #2b2f36;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  background: #ffffff;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #d1d5db;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.indicator:hover {
  background: #9ca3af;
}

.indicator.active {
  background: #667eea;
  width: 24px;
  border-radius: 4px;
}

.carousel-counter {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 10;
}

.article-content {
  margin-bottom: 48px;
  min-height: 200px;
}

.content-text-plain {
  font-size: 16px;
  line-height: 1.8;
  color: #4b5563;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 图片画廊模态框 */
.image-gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-modal-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.gallery-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 8px;
  transition: opacity 0.2s ease;
}

.gallery-close:hover {
  opacity: 0.7;
}

.gallery-close svg {
  width: 24px;
  height: 24px;
}

.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.gallery-prev {
  left: -60px;
}

.gallery-next {
  right: -60px;
}

.gallery-prev:hover,
.gallery-next:hover {
  background: rgba(255, 255, 255, 0.3);
}

.gallery-prev svg,
.gallery-next svg {
  width: 24px;
  height: 24px;
}

.gallery-counter {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 14px;
}

/* 评论区 */
.comments-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  background: #ffffff;
  border-top: 1px solid #eef0f5;
  margin-top: 0;
  min-height: 400px;
  position: relative;
  z-index: 1;
}

.comments-header {
  margin-bottom: 24px;
}

.comments-title {
  font-size: 24px;
  font-weight: 700;
  color: #2b2f36;
  margin: 0;
}

.comment-input-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eef0f5;
}

.comment-input-wrapper {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.current-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.current-user-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-input {
  flex: 1;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  resize: none;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

.comment-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.submit-comment-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-end;
}

.submit-comment-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.submit-comment-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.empty-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #9ca3af;
}

.empty-comments svg {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  color: #d1d5db;
}

.empty-comments p {
  font-size: 16px;
  color: #6b7280;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}

.comment-avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-content-wrapper {
  flex: 1;
}

.comment-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}

.comment-author {
  font-size: 14px;
  font-weight: 600;
  color: #2b2f36;
}

.comment-time {
  font-size: 12px;
  color: #9ca3af;
}

.comment-text {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 8px 0;
}

.comment-actions {
  display: flex;
  gap: 16px;
}

.action-link {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-size: 12px;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s ease;
}

.action-link:hover {
  color: #667eea;
}

.action-link.active {
  color: #dc2626;
}

.action-link svg {
  width: 14px;
  height: 14px;
}

/* 回复输入框 */
.reply-input-section {
  margin-top: 16px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #eef0f5;
}

.reply-input-wrapper {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.reply-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  resize: none;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

.reply-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.reply-cancel-btn {
  padding: 8px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reply-cancel-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.reply-submit-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reply-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.reply-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.replies-list {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid #eef0f5;
}

.reply-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.reply-item:last-child {
  margin-bottom: 0;
}

.reply-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.reply-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.reply-content {
  flex: 1;
}

.reply-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 4px;
}

.reply-author {
  font-size: 13px;
  font-weight: 600;
  color: #2b2f36;
}

.reply-time {
  font-size: 12px;
  color: #9ca3af;
}

.reply-text {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 768px) {
  .article-main {
    padding: 24px 16px;
  }

  .article-title {
    font-size: 24px;
  }

  .article-gallery {
    grid-template-columns: 1fr;
  }

  .article-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .gallery-prev {
    left: 16px;
  }

  .gallery-next {
    right: 16px;
  }
}
</style>

